<template>
    <el-card shadow="never" class="aui-card--fill">
      <div class="mod-sys__dept">
        
        <el-form :inline="true" :model="dataForm">
          <!-- <el-form-item>
            <el-date-picker
              :picker-options="pickerOptions"
              v-model="value1"
              type="daterange"
               :clearable="false"
              range-separator="至"
              :maxDate="today"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item> -->
          <!-- <el-form-item>
            <el-button @click="queryData()">{{ $t("query") }}</el-button>
          </el-form-item> -->
          <el-form-item>
            <el-button  type="primary" @click="exportHandle()">导出</el-button>
          </el-form-item>
          
        </el-form>
        
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="nickname"
            label="用户昵称"
            
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="优惠券名称"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="statusName"
            label="优惠券状态"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="validStart"
            label="优惠券领取时间"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="validEnd"
            label="优惠券有效期限"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="showMobile"
            label="手机号"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="card"
            label="身份证号"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="orderCode"
            label="订单编号"
            header-align="center"
            align="center"
          ></el-table-column>
        </el-table>
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        >
        </el-pagination>
      </div>
      <el-dialog title="明细" :visible.sync="dialogTableVisible">
        <el-button v-if="$hasPermission('merchant:flow:ticInfoExport')" type="primary" @click="exportHandleInfo()">导出</el-button>
        <el-table :data="priceDetail.list">
          <el-table-column property="dwh" label="公司编号" align="center"></el-table-column>
          <el-table-column property="dwhName" label="公司名称" align="center"></el-table-column>
          <el-table-column property="orderCode" label="订单号" align="center"></el-table-column>
          <el-table-column property="shipMoney" label="船票订单实付" align="center"></el-table-column>
          <el-table-column property="shipQuitMoney" label="船票订单退款" align="center"></el-table-column>
          <el-table-column property="shipChange" label="船票订单手续费" align="center"></el-table-column>
          <el-table-column property="ticMoney" label="航运价" align="center"></el-table-column>
        </el-table>
      </el-dialog>

    </el-card>
    
  </template>
  
  <script>
  import mixinViewModule from "@/mixins/view-module";
  import Cookies from 'js-cookie'
  import qs from 'qs'
  export default {
    mixins: [mixinViewModule],
    data() {
      return {
        mixinViewModuleOptions: {
          getDataListURL: "/sys/discountCoupon/userPage",
          getDataListIsPage: true,
          createdIsNeed: false,
          exportURL: "/order/merchant/flow/record/allExport",
        },
        value1: [],
        info: {},
        dataForm: {
        //   startDate: "",
        //   endDate: "",
          source: 2,
          merchantType: 3,
          couponId:'',
          status:''
        },
        pickerOptions: {
          onPick: ({ maxDate, minDate }) => {
            this.choiceDate = minDate.getTime();
            if (maxDate && maxDate.getTime() > new Date().getTime()) {
              this.choiceDate = "";
            }
          },
          disabledDate: (time) => {
            const today = new Date();
            const one = 90 * 24 * 3600 * 1000; // 30天
            today.setHours(0, 0, 0, 0);
            const maxTime =
              today.getTime() > this.choiceDate + one
                ? this.choiceDate + one
                : today.getTime();
            if (this.choiceDate) {
              const minTime = this.choiceDate - one;
              return time.getTime() < minTime || time.getTime() > maxTime;
            }
            return time.getTime() > maxTime;
          },
        },
        priceDetail:[],
        dialogTableVisible:false,
        type:null
      };
    },
    watch: {
      value1(newval, oldval) {
        if (newval != oldval&&newval) {
          this.dataForm.startDate = newval[0];
          this.dataForm.endDate = newval[1];
        } else {
          this.dataForm.startDate = "";
          this.dataForm.endDate = "";
        }
      },
    },
    components: {},
    created() {
      console.log(this.$route.params.id);
      this.dataForm.couponId = this.$route.params.id
      this.dataForm.status = this.$route.params.type
    //   this.dataForm.startDate = new Date().Format("yyyy-MM-dd");
    //   this.today = this.dataForm.startDate;
    //   this.dataForm.endDate = this.dataForm.startDate;
    //   this.value1 = [this.dataForm.startDate, this.dataForm.endDate];
      this.getDataList();
    },
    methods: {
      //明细导出
      exportHandleInfo() {

      console.log(`${window.SITE_CONFIG['apiURL']}`)
      let newDataForm = Object.assign({}, this.dataForm);
        var params = qs.stringify({
          'access_token': Cookies.get('access_token'),
          'type':this.type,
          ...newDataForm
        })
        // console.log('params',params);
        window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportInfoURL}?${params}`
      },
      exportHandleErr() {

      console.log(`${window.SITE_CONFIG['apiURL']}`)
      let newDataForm = Object.assign({}, this.dataForm);
        var params = qs.stringify({
          'access_token': Cookies.get('access_token'),
          ...newDataForm
        })
        // console.log('params',params);
        window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportErrURL}?${params}`
      },
      //查询
      queryData() {
        console.log(this.dataForm)
        if(!this.dataForm.startDate||!this.dataForm.endDate){
          return this.$message.error('日期区间必选');
        }
        this.getDataList();

      },
      //航运价详情
      handleColumnClick(obj,type){
        console.log(obj)
        this.type = type
        var params = {
                status:this.type
        }
        this.$http.post(`/order/merchant/flow/record/ticInfo`, params).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)

          }
          this.dialogTableVisible = true
          this.priceDetail = res.data
        }).catch(() => {})
        }

    },
  };
  </script>
  
  <style lang="scss" scoped>
  .tj {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 10px solid #eee;
    width: 108%;
    margin-left: -4%;
  
    .item {
      p {
        color: #666;
        margin: 0;
  
        &:last-child {
          font-weight: bold;
          font-size: 20px;
          margin-top: 12px;
          color: #333;
        }
      }
    }
  }
  </style>
  